<!DOCTYPE html>
<!-- saved from url=(0049)http://www.marcellop.com/bootmetro/demo/hub.html# -->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style=""><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<!-- Mobile viewport optimized: h5bp.com/viewport -->
	<meta name="viewport" content="width=device-width">

	<title>教学培训系统</title>

	<meta name="robots" content="noindex, nofollow">
	<meta name="description" content="BootMetro : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface.">
	<meta name="keywords" content="bootmetro, modern ui, modern-ui, metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html">
	<meta name="author" content="AozoraLabs by Marcello Palmitessa">
	<link rel="publisher" href="https://plus.google.com/117689250782136016574">

	<!-- remove or comment this line if you want to use the local fonts -->
	<!-- <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css"> -->
	<link href="assets/css/googlefont.css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">

	<link rel="stylesheet" type="text/css" href="./assets/css/bootmetro.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/bootmetro-responsive.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/bootmetro-icons.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/bootmetro-ui-light.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/datepicker.css">

	<!--  these two css are to use only for documentation -->
	<link rel="stylesheet" type="text/css" href="./assets/css/demo.css">
	<style>
		.black_overlay{
		display: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index:1001;
		-moz-opacity: 0.8;
		opacity:.80;
		filter: alpha(opacity=80);
		}
		.white_content {
			display: none;
			position: absolute;
			top: calc(50% - 200px);
			left: calc(50% - 300px);
			width: 600px;
			height: 400px;
			border: 16px solid white;
			background-color: white;
			color: rgba(50, 70, 100, 0.7);
			z-index:1002;
			overflow: auto;
			margin-left: 0;
			margin-right: 0;
		}
		.white_content_small {
			display: none;
			position: absolute;
			top: 20%;
			left: 30%;
			width: 40%;
			height: 50%;
			border: 16px solid lightblue;
			background-color: white;
			z-index:1002;
			overflow: auto;
		}
		body, button, input, select, textarea, h1, h2, h3, h4, h5, h6
		{
			font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, '\5b8b\4f53', sans-serif;
		}
	</style>

	<style>
		.my_list {
			display: block;
			clear: both;
			margin: 100px -20px 0px;
			background-color: rgba(0, 0, 0, 0.1);
			display: block;
			height: calc(100% - 115px);
			position: relative;
		}
		ul li:nth-child(odd) {
			background-color: rgba(0, 0, 0, 0.1);
		}
		li.media {
			margin-top: 0px;
		}
		ul.media-list li.media a {
			margin-right: 0px;
		}
		ul.media-list li.media a img {
			margin: 20px;
		}
		ul.media-list li.media div.media-body {
			margin: 20px;
			height: 80px;
		}
		.close-btn {
			/* background-color: transparent;
			border: none; */
			float: right;
			margin: -20px -18px;
			color: rgba(50, 50, 100, 0.3);
		    font-size: 24px;
		}
		.metro .tile.wide.imagetext .column-text {
		    width: 170px;
		    padding-left: 10px;
		}
		.metro .tile.app .image-wrapper {
		    margin-top: 10px;
		}
	</style>
	<!-- Le fav and touch icons 
	<link rel="shortcut icon" href="http://www.marcellop.com/bootmetro/assets/ico/favicon.ico">
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.marcellop.com/bootmetro/assets/ico/apple-touch-icon-144-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.marcellop.com/bootmetro/assets/ico/apple-touch-icon-114-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.marcellop.com/bootmetro/assets/ico/apple-touch-icon-72-precomposed.png">
	<link rel="apple-touch-icon-precomposed" href="http://www.marcellop.com/bootmetro/assets/ico/apple-touch-icon-57-precomposed.png">-->	
  
	<!-- All JavaScript at the bottom, except for Modernizr and Respond.
		Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
		For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ 
	<script type="text/javascript" async src="http://www.google-analytics.com/ga.js"></script>-->
	
<style id="holderjs-style" type="text/css">.holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}</style>
<style type="text/css">#lb_infobar_8936321763{color:#000000 !important;font-weight:normal !important;text-decoration:none !important;margin-top:0 !important;margin-bottom:0 !important;margin-left:0 !important;margin-right:0 !important;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;float:none !important;text-align:left !important;height:37px !important;width:100% !important;background-color:#F5F5F5 !important;background-image:-webkit-linear-gradient(top,#F5F5F5,#EEEDED) !important;border-bottom:1px solid #C0C0C0 !important;box-shadow:inset 0 1px 1px 1px #FFFFFF !important;line-height:36px !important;font-family:'微软雅黑','宋体' !important;z-index:9999999999 !important;margin:0 !important;padding:0 !important;position:fixed !important;top:0px !important;left:0px !important;}
#lb_infobar_8936321763,#lb_infobar_8936321763 *{border-radius:0 !important;padding:0 !important;margin:0 !important;}
#lb_infobar_8936321763 *{width:auto !important;background:none !important;}
#lb_infobar_8936321763 input{border-radius:4px !important;box-shadow:0 1px 2px rgba(0,0,0,.15) !important;font-family:'微软雅黑,','宋体' !important;font-size:12px !important;font-weight:normal !important;text-shadow:none !important;margin:0 0 0 18px !important;padding:0 !important;}
#lb_infobar_translate_8936321763{background-color:#FBB016 !important;background-image:-webkit-linear-gradient(top,#FBB016,#ED8A0D) !important;width:78px !important;height:26px !important;border:1px solid #E19D3C !important;color:#FFFFFF !important;cursor:pointer !important;line-height:normal !important;vertical-align:middle !important;}
#lb_infobar_translate_8936321763:hover{background-color:#FDBF3F !important;background-image:-webkit-linear-gradient(top,#FDBF3F,#ED8A0D) !important;}
#lb_infobar_translate_8936321763:active{background-color:#ED8A0D !important;background-image:-webkit-linear-gradient(top,#ED8A0D,#FBB016) !important;}
#lb_infobar_words_8936321763{background-color:#FBB016 !important;background-image:-webkit-linear-gradient(top,#FBB016,#ED8A0D) !important;width:90px !important;height:26px !important;border:1px solid #E19D3C !important;color:#FFFFFF !important;cursor:pointer !important;line-height:normal !important;vertical-align:middle !important;left:360px !important;}
#lb_infobar_words_8936321763:hover{background-color:#FDBF3F !important;background-image:-webkit-linear-gradient(top,#FDBF3F,#ED8A0D) !important;}
#lb_infobar_words_8936321763:active{background-color:#ED8A0D !important;background-image:-webkit-linear-gradient(top,#ED8A0D,#FBB016) !important;}
#lb_infobar_return_8936321763{background-color:#FFFFFF !important;background-image:-webkit-linear-gradient(top,#FFFFFF,#E0DFDF) !important;width:78px !important;height:26px !important;border:1px solid #B0AFAF !important;color:rgba(0,0,0,.5) !important;cursor:pointer !important;line-height:normal !important;vertical-align:middle !important;}
#lb_infobar_return_8936321763.lb_infobar_return_words_8936321763{width:130px !important;}
#lb_infobar_return_8936321763:hover{background-color:#EDECEC !important;background-image:-webkit-linear-gradient(top,#FFFFFF,#EDECEC) !important;}
#lb_infobar_return_8936321763:active{background-color:#E0DFDF !important;background-image:-webkit-linear-gradient(top,#E0DFDF,#FFFFFF) !important;}
#lb_infobar_8936321763 a{text-decoration:underline !important;font-size:12px !important;color:#999999 !important;cursor:pointer !important;}
#lb_infobar_8936321763 a:hover{color:#FC9500 !important;}
#lb_infobar_8936321763 a:active{color:#D68003 !important;}
#lb_infobar_close_8936321763{background-position:-66px -27px !important;cursor:pointer !important;position:absolute !important;top:0 !important;right:1em !important;line-height:36px !important;}
#lb_infobar_close_8936321763:hover{background-position:-66px -41px !important;}
#lb_infobar_close_8936321763:active{background-position:-66px -54px !important;}
#lb_infobar_notice_8936321763{line-height:36px !important;margin-left:55px !important;font-size:14px !important;vertical-align:middle !important;}
#lb_infobar_powered_8936321763{padding-left:18px !important;font-size:10px !important;color:#979797 !important;font-family:'Arial' !important;font-style:italic !important;}
#lb_infobar_ignore_8936321763{line-height:36px !important;margin-right:3em !important;position:absolute !important;top:0 !important;right:0 !important;}
#lb_infobar_manual_8936321763{line-height:36px !important;margin-right:12em !important;position:absolute !important;top:0 !important;right:0 !important;}
#lb_infobar_icon_8936321763{position:absolute !important;top:0 !important;left:0 !important;height:37px !important;width:42px !important;color:#fff !important;font-size:24px !important;text-align:center !important;background-repeat:no-repeat !important;background-position:-80px 0 !important;}
#lb_infobar_translate_8936321763.lb_infobar_btn_inactive_8936321763,#lb_infobar_words_8936321763.lb_infobar_btn_inactive_8936321763{background-color:#FFFFFF !important;background-image:-webkit-linear-gradient(top,#FFFFFF,#E0DFDF) !important;border:1px solid #B0AFAF !important;color:#808080 !important;}
#lb_infobar_translate_8936321763.lb_infobar_btn_inactive_8936321763:hover,#lb_infobar_words_8936321763.lb_infobar_btn_inactive_8936321763:hover{background-color:#EDECEC !important;background-image:-webkit-linear-gradient(top,#FFFFFF,#EDECEC) !important;}
#lb_infobar_translate_8936321763.lb_infobar_btn_inactive_8936321763:hover,#lb_infobar_words_8936321763.lb_infobar_btn_inactive_8936321763:active{background-color:#E0DFDF !important;background-image:-webkit-linear-gradient(top,#E0DFDF,#FFFFFF) !important;}
#lb_infobar_hover_8936321763:before{content:" " !important;position:absolute !important;border:5px solid transparent !important;border-top:5px solid #000 !important;bottom: -10px !important;left: 50% !important;}
#lb_infobar_hover_8936321763:after{content:" " !important;position:absolute !important;border:5px solid transparent !important;border-top:5px solid #fff !important;bottom: -9px !important;left: 50% !important;}
#lb_infobar_hover_8936321763{line-height:1.2 !important;font-size:12px !important;min-width:150px !important;position:fixed !important;background:#fff !important;border:1px solid #333 !important;border-radius:3px !important;padding:10px !important;color:#333 !important;z-index:9999999999 !important;}
#lb_infobar_hover_8936321763.lb_infobar_hover_below:before{content:" " !important;position:absolute !important;border:5px solid transparent !important;border-bottom:5px solid #000 !important;top:-10px !important;left:50% !important;bottom:auto !important;}
#lb_infobar_hover_8936321763.lb_infobar_hover_below:after{content:" " !important;position:absolute !important;border:5px solid transparent !important;border-bottom:5px solid #fff !important;top: -9px !important;left: 50% !important;bottom:auto !important;}
</style></head>

<body class="panorama-parallax">
	<!--[if lt IE 7]>
	<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
	<![endif]-->

	<div id="wrap">
		<div id="nav-bar" class="">
			<div class="pull-left">
				<div id="header-container">
					<h5>中国兵器人才学院教学培训系统</h5>
						<!--菜单列表-->
						<div class="dropdown">
							<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
								菜单列表
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
							<li><a href="http://www.marcellop.com/bootmetro/demo/metro-layouts.html">Metro Layouts</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/hub.html">Hub</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/tiles-templates.html">Tile Templates</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/listviews.html">ListViews</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/appbar-demo.html">App-Bar Demo</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/table.html">Table Demo</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/wizard.html">Wizard</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/icons.html">Icons</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/toast.html">Toast Notifications</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/pivot.html">Pivot</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/metro-components.html">Metro Components</a></li>
							<li class="divider"></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/scaffolding.html">Bootstrap Scaffolding</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/base-css.html">Bootstrap Base CSS</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/components.html">Bootstrap Components</a></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/javascript.html">Bootstrap Javascript</a></li>
							<li class="divider"></li>
							<li><a href="http://www.marcellop.com/bootmetro/demo/index.html">Home</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="pull-right">
				<div id="top-info" class="pull-right">
					<a id="settings" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html" class="win-command pull-right">
						<span class="win-commandicon win-commandring icon-cog-3"></span>
					</a>
					<a id="logged-user" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html" class="win-command pull-right">
						<span class="win-commandicon win-commandring icon-user"></span>
					</a>
					<div class="pull-left">
						<h3>欢迎使用，</h3>
						<h4>管理员</h4>
					</div>
				</div>
			</div>
		</div>
		<!-- <div id="alerts-container">
			<div id="toast-example1" class="toast toasttext02 fade in">
				<button type="button" class="close" data-dismiss="alert"></button>
				<div class="pull-left">
					<div class="toast-object icon-info-4"></div>
				</div>
				<div class="toast-body">
					<h4 class="toast-heading">Alpha version!</h4>
					<p>Please be patience, this demo is still a work in progress! Thanks.</p>
				</div>
			</div>
		</div> -->


		<div class="metro panorama" style="height: 854px;">
			<div class="panorama-sections" style="width: 2390px; height: 952px; margin-left: -561px;">
				<div class="panorama-section tile-span-4">

					<h2>热门浏览</h2>

					<div class="tile-column-span-2">
                        <a class="tile wide imagetext wideimage bg-color-blue" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                            <img src="./assets/img/640px-Darvasa_gas_crater_panorama.jpg" alt="">
                            <div class="textover-wrapper bg-color-blueDark">
                                <div class="text2">The Door to Hell, a burning natural gas field in Derweze, Turkmenistan</div>
                            </div>
                        </a>

                        <a class="tile wide imagetext wideimage bg-color-green" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                            <img src="./assets/img/320px-Lady_Elliot_Island_SVII.jpg" alt="">
                            <div class="textover-wrapper transparent">
                                <div class="text2">An image of the coral reef near Lady Elliot Island</div>
                            </div>
                        </a>

                        <a class="tile square image bg-color-red" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                            <img src="./assets/img/611px-Wulfenite_mexique.jpg" alt="">
                            <div class="textover-wrapper transparent">
                                <div class="text2">Wulfenite </div>
                            </div>
                        </a>

                        <a class="tile square image" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                            <img src="./assets/img/640px-Hagia_Sophia_Mars_2013.jpg" alt="">
                            <div class="textover-wrapper transparent">
                                <div class="text2">Hagia Sophia</div>
                            </div>
                        </a>

                    </div>

                    <div class="tile-column-span-1">
						<a class="tile squarepeek bg-color-orange" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
							<img src="./assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg" alt="">
							<div class="text-inner">
							<div class="text4">The Asian Openbill or Asian Openbill Stork (Anastomus oscitans) is a large wading bird in the stork family Ciconiidae.</div>
							</div>
						</a>

                    </div>
				</div>


				<div class="panorama-section tile-span-4">
					<h2>热门视频</h2>
					<!-- onclick="/*ShowDiv('MyDiv','fade')*/" -->
					<a class="tile wide imagetext wideimage bg-color-green" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
					  <img src="./assets/img/320px-Lady_Elliot_Island_SVII.jpg" alt="">
					  <div class="textover-wrapper transparent">
						 <div class="text2">An image of the coral reef near Lady Elliot Island</div>
					  </div>
				    </a>

				    <a class="tile square image bg-color-red" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
					    <img src="./assets/img/611px-Wulfenite_mexique.jpg" alt="">
					    <div class="textover-wrapper transparent">
						    <div class="text2">Wulfenite </div>
					    </div>
				    </a>

				    <a class="tile square image" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
					    <img src="./assets/img/640px-Hagia_Sophia_Mars_2013.jpg" alt="">
					    <div class="textover-wrapper transparent">
						    <div class="text2">Hagia Sophia</div>
					    </div>
				    </a>
				    <a class="tile wide imagetext bg-color-blue music_pop">
						<div class="image-wrapper">
							<span class="icon icon-video"></span>
						</div>
						<div class="column-text">
							<div class="text">视频</div>
							<div class="text">Video</div>
							<form class="navbar-search pull-left" style="display: none;">
								<input type="text" class="search-query" placeholder="Search" style="width: 305px; background-color: #2a7db8; color: #eee;">
							</form>
							<span class="app-label">10个文件</span>
						</div>
					</a>
				</div>

				<div class="panorama-section tile-span-4">
					<h2>热门WORD</h2>
					<!-- onclick="/*ShowDiv('MyDiv','fade')*/" -->
					<a class="tile wide app wideimage bg-color-blue" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
						<div class="image-wrapper">
							<span class="icon  icon-file-word"></span>
						</div>
						<div class="column-text">
							<div class="app-label">会议纪要.doc</div>
						</div>
					</a>
					<a class="tile square app bg-color-blue" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
						<div class="image-wrapper">
							<span class="icon icon-file-word"></span>
						</div>
						<div class="column-text">
							<div class="app-label">数据分析.doc</div>
						</div>
					</a>

					<!-- <a class="tile app bg-color-blue" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
					                       <div class="image-wrapper">
					                          <span class="icon icon-map"></span>
					                       </div>
					                       <div class="app-label">Map</div>
					                    </a> -->

					<a class="tile app bg-color-blue" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
				   		<div class="image-wrapper">
							<span class="icon icon-file-word"></span>
						</div>
						<div class="app-label">数据分析.doc</div>
						<!-- <div class="column-text">
							<div class="app-label">数据分析.doc</div>
						</div> -->
					</a>
					<a class="tile wide imagetext bg-color-blue music_pop">
						<div class="image-wrapper">
							<span class="icon  icon-file-word"></span>
						</div>
						<!-- <div class="column-text">
							<span class="app-label">更多DOC...</span>
						</div>
						<div class="image-wrapper">
							<span class="icon icon-video"></span>
						</div> -->
						<div class="column-text">
							<div class="text">更多Doc文档</div>
							<div class="text">Office Word File</div>
							<form class="navbar-search pull-left" style="display: none;">
								<input type="text" class="search-query" placeholder="Search" style="width: 305px; background-color: #2a7db8; color: #eee;">
							</form>
							<span class="app-label">10个文件</span>
						</div>
					</a>
				</div>

				<div class="panorama-section tile-span-4">
					<h2>热门EXCEL</h2>
					<!-- onclick="/*ShowDiv('MyDiv','fade')*/" -->
					<a class="tile wide app wideimage bg-color-green" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
						<div class="image-wrapper">
							<span class="icon  icon-file-excel"></span>
						</div>
						<div class="column-text">
							<div class="app-label">数据表格.xls</div>
						</div>
				   </a>

					<a class="tile square app bg-color-green" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
				   		<div class="image-wrapper">
							<span class="icon  icon-file-excel"></span>
						</div>
						<div class="column-text">
							<div class="app-label">数据分析.xls</div>
						</div>
					</a>
				    <a class="tile square app bg-color-green" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
						<div class="image-wrapper">
							<span class="icon  icon-file-excel"></span>
						</div>
						<div class="column-text">
							<div class="app-label">数据分析.xls</div>
						</div>
					</a>
					<a class="tile wide app bg-color-green music_pop" >
						<div class="image-wrapper">
							<span class="icon  icon-file-excel"></span>
						</div>
						<div class="column-text">
							<span class="app-label">更多EXCEl...</span>
						</div>
					</a>
				</div>

				<div class="panorama-section tile-span-4">
					<h2>热门PDF</h2>
					<!-- onclick="/*ShowDiv('MyDiv','fade')*/" -->
					<a class="tile wide app bg-color-red" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
						<div class="image-wrapper">
							<span class="icon icon-file-pdf"></span>
						</div>
						<div class="app-label">两会重要指示.pdf</div>
					</a>

					<a class="tile square app bg-color-red" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">

						<div class="image-wrapper">
							<span class="icon icon-file-pdf"></span>
						</div>
						<div class="app-label">2017放假通知.pdf</div>
					</a>
					<a class="tile square app wideimage bg-color-red" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
						<div class="image-wrapper">
							<span class="icon  icon-file-pdf"></span>
						</div>
						<div class="app-label">两会重要指示.pdf</div>
					</a>
					<a class="tile wide app bg-color-red music_pop" >
						<div class="image-wrapper">
							<span class="icon  icon-file-pdf"></span>
						</div>
						<div class="column-text">
							<span class="app-label">更多PDF...</span>
						</div>
					</a>
				</div>
			</div>
		</div>
		<a id="panorama-scroll-prev" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html" style="display: block;"></a>
		<a id="panorama-scroll-next" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html"></a>
		<div id="panorama-scroll-prev-bkg"></div>
		<div id="panorama-scroll-next-bkg"></div>
	</div>
	<div id="charms" class="win-ui-dark slide">
		<div id="theme-charms-section" class="charms-section">
			<div class="charms-header">
				<a href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html" class="close-charms win-backbutton"></a>
				<h2>Settings</h2>
			</div>

			<div class="row-fluid">
				<div class="span12">

					<form class="">
						<label for="win-theme-select">Change theme:</label>
						<select id="win-theme-select" class="">
							<option value="metro-ui-light">Light</option>
							<option value="metro-ui-dark">Dark</option>
						</select>
					</form>
				</div>
			</div>
		</div>
	 </div>
	<!--弹出层时背景层DIV-->
	<div id="fade" class="black_overlay in"></div>
	<div id="MyDiv" class="white_content modal">
		<div style="text-align: left; cursor: default; height: 40px;">
			<h3>Demo Video</h3>
			<button class="close pull-right muted" onclick="CloseDiv('MyDiv','fade')"></button>
		</div>
		<video src="assets/media/test.mp4"  width="100%" controls="controls" preload="meta"></video>
	</div>

	<!-- SCRIPT ====================================== -->

	<script src="assets/js/jquery-1.10.0.min.js"></script>
	<script>window.jQuery || document.write("<script src='assets/js/jquery-1.10.0.min.js'>\x3C/script>")</script>

	<script src="./assets/js/modernizr-2.6.2.min.js"></script>

	<!--[if IE 7]>
	<script type="text/javascript" src="scripts/bootmetro-icons-ie7.js">
	<![endif]-->

	<script type="text/javascript" src="./assets/js/min/bootstrap.min.js"></script>
	<script type="text/javascript" src="./assets/js/bootmetro-panorama.js"></script>
	<script type="text/javascript" src="./assets/js/bootmetro-pivot.js"></script>
	<script type="text/javascript" src="./assets/js/bootmetro-charms.js"></script>
	<script type="text/javascript" src="./assets/js/bootstrap-datepicker.js"></script>

	<script type="text/javascript" src="./assets/js/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="./assets/js/jquery.touchSwipe.min.js"></script>

	<!-- <script type="text/javascript" src="./assets/js/holder.js"></script> -->
	<!-- <script type="text/javascript" src="../assets/js/perfect-scrollbar.with-mousewheel.min.js"></script> -->
	<!-- <script type="text/javascript" src="./assets/js/demo.js"></script> -->

	<script type="text/javascript">
		// 弹出隐藏层
		function ShowDiv(show_div, bg_div) {
			document.getElementById(show_div).style.display = 'block';
			document.getElementById(bg_div).style.display = 'block' ;
			$('#' + show_div + ' video')[0].currentTime = 0;
		};
		// 关闭弹出层
		function CloseDiv(show_div,bg_div) {
			document.getElementById(show_div).style.display = 'none';
			document.getElementById(bg_div).style.display = 'none';
			$.each($('video'), function(){
				this.pause();
			})
		};
	</script>

	<script type="text/javascript">

		$('.panorama').panorama({
			nicescroll: false,
			showscrollbuttons: true,
			keyboard: true,
			parallax: true
		});

		// $(".panorama").perfectScrollbar();
		$('#pivot').pivot();

	</script>

	<link rel="stylesheet" href="assets/popup/popup.css">
	<script src="assets/popup/popup.js"></script>

	<link rel="stylesheet" href="assets/perfect-scrollbar/css/perfect-scrollbar.min.css">
	<script src="assets/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js"></script>

	<script>
		// 绑定点击弹出
		bindPopup('.music_pop', 'click', {
			width: '400px',
			height: '500px',
			recoverTrigger: '.close-btn',
			popCallback: function(node) {
				node.append(
					// '<div class="list-container">' +
						'<div class="my_list">' +
							'<ul class="media-list">' +
								'<li class="media" onclick="ShowDiv(\'MyDiv\',\'fade\')">' +
									'<a class="pull-left" href="#">' +
										'<img class="media-object" data-src="holder.js/64x64" style="width: 80px; height: 80px;" src="assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg"/>' +
									'</a>' +
									'<div class="media-body">' +
										'<h4 class="media-heading">Demo Video</h4>' +
										'This video is for demo.' +
										'' +
										'<!-- Nested media object -->' +
										'<div class="media">' +
										'Youtube' +
										'</div>' +
									'</div>' +
								'</li>' +
								'<li class="media">' +
									'<a class="pull-left" href="#">' +
										'<img class="media-object" data-src="holder.js/64x64" style="width: 80px; height: 80px;" src="assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg"/>' +
									'</a>' +
									'<div class="media-body">' +
										'<h4 class="media-heading">Unnamed</h4>' +
										'This is fake.' +
										'' +
										'<!-- Nested media object -->' +
										'<div class="media">' +
										'Nobody' +
										'</div>' +
									'</div>' +
								'</li>' +
								'<li class="media">' +
									'<a class="pull-left" href="#">' +
										'<img class="media-object" data-src="holder.js/64x64" style="width: 80px; height: 80px;" src="assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg"/>' +
									'</a>' +
									'<div class="media-body">' +
										'<h4 class="media-heading">Unnamed</h4>' +
										'This is fake.' +
										'' +
										'<!-- Nested media object -->' +
										'<div class="media">' +
										'Nobody' +
										'</div>' +
									'</div>' +
								'</li>' +
								'<li class="media">' +
									'<a class="pull-left" href="#">' +
										'<img class="media-object" data-src="holder.js/64x64" style="width: 80px; height: 80px;" src="assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg"/>' +
									'</a>' +
									'<div class="media-body">' +
										'<h4 class="media-heading">Unnamed</h4>' +
										'This is fake.' +
										'' +
										'<!-- Nested media object -->' +
										'<div class="media">' +
										'Nobody' +
										'</div>' +
									'</div>' +
								'</li>' +
								'<li class="media">' +
									'<a class="pull-left" href="#">' +
										'<img class="media-object" data-src="holder.js/64x64" style="width: 80px; height: 80px;" src="assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg"/>' +
									'</a>' +
									'<div class="media-body">' +
										'<h4 class="media-heading">Unnamed</h4>' +
										'This is fake.' +
										'' +
										'<!-- Nested media object -->' +
										'<div class="media">' +
										'Nobody' +
										'</div>' +
									'</div>' +
								'</li>' +
								'<li class="media">' +
									'<a class="pull-left" href="#">' +
										'<img class="media-object" data-src="holder.js/64x64" style="width: 80px; height: 80px;" src="assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg"/>' +
									'</a>' +
									'<div class="media-body">' +
										'<h4 class="media-heading">Unnamed</h4>' +
										'This is fake.' +
										'' +
										'<!-- Nested media object -->' +
										'<div class="media">' +
										'Nobody' +
										'</div>' +
									'</div>' +
								'</li>' +
								'<li class="media">' +
									'<a class="pull-left" href="#">' +
										'<img class="media-object" data-src="holder.js/64x64" style="width: 80px; height: 80px;" src="assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg"/>' +
									'</a>' +
									'<div class="media-body">' +
										'<h4 class="media-heading">Unnamed</h4>' +
										'This is fake.' +
										'' +
										'<!-- Nested media object -->' +
										'<div class="media">' +
										'Nobody' +
										'</div>' +
									'</div>' +
								'</li>' +
		   					'</ul>' +
	   					'</div>' //+
					// '</div>'
				);
				node.find('.my_list').perfectScrollbar();
				node.find('form.navbar-search').show();
			},
			beforeRecover: function(node){
				node.find('form.navbar-search').hide();
			},
			recoverCallback: function(node) {
				node.find('.my_list').remove();
				node.find('form.navbar-search input').val('');
			}
		});
	</script>
</body></html>